{include file="public/header"}

        <style scoped>
            .el-select-dropdown {
            padding: 0;
            }
            .prant{
                margin-left: 10px;
            }
        </style>
        {include file="public/style"}
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item>产品管理</el-breadcrumb-item>
            <el-breadcrumb-item>分类列表</el-breadcrumb-item>
        </el-breadcrumb>
        <br>
        <el-card >
            <div style="display: flex;align-items: center;justify-content: flex-start;">
                <el-form :inline="true" :model="searchForm" size="small"  ref="refsearchForm" >                
                    <el-form-item label="分类名称" >                     
                        <el-input v-model="searchForm.pubnameCn" placeholder="请输入分类名称" clearable filterable ></el-input>
                    </el-form-item>                 
                    <el-form-item label="是否有效类目">
                        <el-select v-model="searchForm.valid" placeholder="请选择" filterable clearable>
                            <el-option v-for="item in valid" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item> 
                    <el-form-item label="是否子叶类目">
                        <el-select v-model="searchForm.leaf" placeholder="请选择" filterable clearable>
                            <el-option v-for="item in leaf" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item> 
                    <el-form-item>
                        <el-button type="primary"  size="small" plain @click="getSearch" icon="el-icon-search" v-cloak>查询</el-button>
                    </el-form-item>          
               </el-form>             
            </div>

            <el-table :data="tablelist"   style="width: 100%;margin-bottom: 20px;"  row-key="id"  border default-expand-all :tree-props="{children: 'children', hasChildren: 'hasChildren'}"> 
                <el-table-column prop="id"  label="发布类目code" align="center"  ></el-table-column>       
                <el-table-column   prop="pubnameCn" label="分类中文名称"min-width="150"> </el-table-column>     
                <el-table-column   prop="pubname" label="分类英文名称" min-width="150"> </el-table-column>   
                <el-table-column   prop="stockPeriod" label="备货期" min-width="120"> </el-table-column>   
                <el-table-column   prop="stockperiod" label="备货数量不足提醒" min-width="140"> </el-table-column>                               
                <el-table-column   prop="leaf"  label="是否子叶类目" min-width="120">
                   <template v-slot="{row}">
                       <span v-if="row.leaf===1">
                           是子叶类目
                        </span>
                        <span   v-if="row.leaf===0">
                          不是子叶类目                                            
                       </span>     
                      
                   </template>
                </el-table-column>
                <el-table-column   prop="valid"  label="是否有效类目" max-width="120">
                   <template v-slot="{row}">
                       <span v-if="row.valid===1">
                           <el-tag type="success">是</el-tag>
                        </span>
                        <span   v-if="row.valid===0">
                           <el-tag type="danger">不是</el-tag>                                                
                       </span>     
                      
                   </template>
                </el-table-column>               
                               
            </el-table>
            <!-- page -->            
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchForm.pagenum" :page-sizes="[20,50,100, 150, 300,500,1000,2000]"
                :page-size="searchForm.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>  
        </el-card>       
       

</div>
    <script>
        new Vue({
            el: '#app',
            data: function () {
                    return {    
                 
                        catego:[], //父体分类列表   
                        title:'',
                        url:"/admin/products",                     
                        searchForm:{   
                            pubnameCn:'',     
                            leaf:'', 
                            valid:'',    
                            pagesize:20,
                            pagenum:1, 
                        } , //搜索条件
                        valid:[                   
                            {
                                value: 1,
                                label: '有效类目'
                            },
                            {
                                value: 2,
                                label: '无效类目'
                            },
                        ],// 状态是否正常     
                        leaf:[                   
                            {
                                value: 1,
                                label: '是子叶类目'
                            },
                            {
                                value: 2,
                                label: '不是子叶类目'
                            },
                        ],// 是否子叶类目              
                
                        total:0,   //分页总页数      
                        tablelist:[] , 
                    }
            },
            mounted(){        
                this.getSearch()
            },
            methods: {        

                async getDatalist() {
                    const res = await axios.post(this.url+'/catego', {params: this.searchForm})
                        if (res.status !== 1) {
                            return this.$message.error(res.info);
                        }
                    this.total = res.info.total
                    this.tablelist = res.info.list

                },
                    
                handleSizeChange(newSize) {
                    this.searchForm.pagesize = newSize
                    this.getDatalist()
                },
                handleCurrentChange(newPage) {
                    this.searchForm.pagenum = newPage
                    this.getDatalist()
                },
                handleSelectionChange(val) {
                    this.multipleSelection = val;
                },     
                getSearch() {
                    this.searchForm.pagenum = 1
                    this.getDatalist()
                },            
             
            }
        })
    </script>
  </body>
</html>
